<template>
    <div>
        <div class="frame">
            <div class="center">
                <div class="card">
                    <div class="card__profile">
                        <div class="profile__image">
                            <div class="image__outerCircle"></div>
                            <div class="image__innerCircle"></div>
                            <img src="https://robohash.org/愣头青?set=set2" width="70" height="70">
                        </div>
                        <div class="profile__info">
                            <span class="info__name">Touqing Leng</span>
                            <span class="info__proffession">fullstack developer</span>
                        </div>
                        <button class="profile__followBtn">follow</button>
                        <button class="profile__messageBtn">message</button>
                    </div>
                    <div class="card__stats">
                        <div class="stats">
                            <span class="stats__value">523</span>
                            <span class="stats__label">posts</span>
                        </div>
                        <div class="stats">
                            <span class="stats__value">1387</span>
                            <span class="stats__label">likes</span>
                        </div>
                        <div class="stats">
                            <span class="stats__value">146</span>
                            <span class="stats__label">follower</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <btn-group :data="data"></btn-group>
    </div>
</template>

<script>
import btnGroup from "../../..//src/components/FooterButton/index.vue";

export default {
    name: "cssChallengeDay6",
    components: {btnGroup},
    data() {
        return {
            data: null
        };
    },
    created() {
        this.data = this.$route.params
    },
}
</script>

<style lang="scss" scoped>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

* {
  box-sizing: border-box;
  margin: 0;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: linear-gradient(to top right, #37c60c, #6bb04c);
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card {
  width: 320px;
  height: 300px;
  background: white;

  display: flex;

  border-radius: 3px;
  overflow: hidden;
  box-shadow: 6px 5px 14px 0px rgba(0, 0, 0, 0.3);
  //平移进场效果
  animation: slide-in 1.25s ease;
}

.card__stats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
}

.stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 120px;
  background: #f5e8df;
  transition: all 0.4s ease-in-out;


  &:hover {
    cursor: pointer;
    background: #e1cfc2;
  }
}

.stats__value {
  color: #786450;

  font-size: 16px;
  font-weight: 600;
}

.stats__label {
  color: #b09f90;
  text-transform: capitalize;
  font-size: 11px;
}

.card__profile {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.image__outerCircle, .image__innerCircle {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  transition: all 1.5s ease-in-out;
}

.image__outerCircle {
  top: -6px;
  left: -6px;
  border-color: #786450 transparent #786450 #786450;
  width: 82px;
  height: 82px;
}

.image__innerCircle {
  top: -3px;
  left: -3px;
  border-color: #786450 #786450 #786450 transparent;
  width: 76px;
  height: 76px;
}

.profile__image {
  position: relative;
  margin: 40px 0px 20px 0px;

  width: 70px;
  height: 70px;

  img {
    border-radius: 50%;
  }
}

.profile__image:hover {
  cursor: pointer;

  .image__outerCircle {
    transform: rotate(360deg);
  }

  .image__innerCircle {
    transform: rotate(-360deg);
  }
}

.profile__info {
  margin-bottom: 33px;
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
}

.info__name {
  font-size: 15px;
  font-weight: 600;
}

.info__proffession {
  font-size: 11px;
  line-height: 15px;
}

.profile__followBtn {
  margin-bottom: 10px;
}

.profile__followBtn, .profile__messageBtn {
  width: 120px;
  height: 30px;

  background: white;
  color: #786450;
  border: 1px solid #786450;
  border-radius: 15px;
  font-weight: 600;
  font-size: 12px;
  text-transform: capitalize;
  cursor: pointer;

  transition: all 0.3s ease-in-out;

  &:hover {
    background: #786450;
    color: white;
  }
}

@keyframes slide-in {
  0% {
    transform: translate(-1000px, 0px);
  }

  80% {
    transform: translate(40px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}
</style>